<template>
    <div class="wallet-new">
        <el-card class="box-card wallet-content">
            <div class="box" v-show="!success">
                <img src="../images/step1.png" class="step">
                <el-form class="form" ref="newWallet" :rules="newRules" :model="newWallet" label-position="top">
                    <el-form-item prop="account" :label="$t('wallet.walletName')">
                        <el-input v-model.trim="newWallet.account" :placeholder="$t('wallet.individualWalletName')"></el-input>
                    </el-form-item>
                    <el-form-item prop="password" :label="$t('wallet.password')" class="password">
                        <div class="warn">
                            !!! {{$t("wallet.pleaseRememberPassword")}}
                        </div>
                        <el-input v-if="visible" type="password" v-model.trim="newWallet.password" :placeholder="$t('wallet.enterNewPsw')">
                            <i slot="suffix" title="显示密码" @click="changePass('show')" class="iconToggle icon-eye"></i>
                        </el-input>
                        <el-input v-else type="text" v-model.trim="newWallet.password" :placeholder="$t('wallet.enterNewPsw')">
                            <i slot="suffix" title="隐藏密码" @click="changePass('hide')" class="iconToggle icon-hide"></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="passwordConfirm" :label="$t('wallet.rePsw')">
                        <el-input v-if="visible1" type="password" v-model.trim="newWallet.passwordConfirm" :placeholder="$t('wallet.repeatPsw')">
                            <i slot="suffix" title="显示密码" @click="changePass1('show')" class="iconToggle icon-eye"></i>
                        </el-input>
                        <el-input v-else type="test" v-model.trim="newWallet.passwordConfirm" :placeholder="$t('wallet.repeatPsw')">
                            <i slot="suffix" title="隐藏密码" @click="changePass1('hide')" class="iconToggle icon-hide"></i>
                        </el-input>
                    </el-form-item>
                </el-form>
                <div class="tab-list">
                    <el-button @click.native="goImport" type="default">{{$t('wallet.importW')}}</el-button>
                    <el-button @click.native="newOWallet()" type="primary">{{$t('wallet.createWallet')}}</el-button>
                </div>
            </div>
            <div class="box box2" v-show="success">
                <img src="../images/step2.png" class="step">
                <img src="../images/create-success.png" class="success">
                <p class="compolete">{{$t("wallet.IndividualWalletSuccess")}}</p>
                <div class="wallet-info">
                    <p>
                        <span class="label">{{$t("wallet.name")}}:</span>
                        <span class="value bold">{{walletInfo && walletInfo.keystore && walletInfo.keystore.name}}</span>
                    </p>
                    <p>
                        <span class="label">{{$t("wallet.address")}}:</span>
                        <span class="value bold">{{walletInfo && walletInfo.keystore && walletInfo.keystore.publicKey}}</span>
                    </p>
                    <p class="public-box">
                        <span class="label">{{$t("wallet.pubKey")}}:</span>
                        <span class="value pub bold">{{walletInfo && walletInfo.keystore && walletInfo.keystore.publicKey}}</span>
                    </p>
                    <p>
                        <span class="label">{{$t("wallet.signature")}}:</span>
                        <span class="value bold">{{walletInfo && walletInfo.keystore && walletInfo.keystore.crypto.cipher}}</span>
                    </p>
                    <p>
                        <span class="tip">{{$t("wallet.tipSaveJson")}}</span>
                        <span class="btn">{{$t("wallet.downloadJson")}}<input type="file" title="点击选择备份路径" id="newFile" ref="inputNewFile" webkitdirectory @change="getFile"></span>
                    </p>
                </div>
                <p class="back">
                    <span class="btn" @click="goBack">{{$t("wallet.finish")}}</span>
                </p>
            </div>
        </el-card>
    </div>
</template>

<script>
import { createAccount, testCoin } from '../../../createAccount'
import fs from 'fs'
export default {
    name: "o-wallet-create",
    data() {
        return{
            success:false,
            newWallet: {
                account: '',
                password: '',
                passwordConfirm: ''
            },
            walletInfo: {},
            visible: true,
            visible1: true
        }
    },
    computed: {
        newRules(){
            return{
                account: [
                    {required: true, trigger: 'blur,change',validator:this.checkAccount},
                ],
                password: [
                    {required: true, message: this.$t('form.nonPsw'), trigger: 'blur,change'},
                    {min: 6, message: this.$t('form.less6'), trigger: 'blur,change'}
                ],
                passwordConfirm: [
                    {validator: this.checkPass, trigger: 'blur,change'}
                ]
            }
        }
    },
    activated(){
        this.reset()
    },
    methods: {
        reset(){
            this.success = false;
            this.newWallet = {
                account: '',
                password: '',
                passwordConfirm: ''
            };
            this.walletInfo = {};
        },
        changePass(value) {
            this.visible = !(value === 'show');
        },
        changePass1(value) {
            this.visible1 = !(value === 'show');
        },
        checkPass(rule, value, callback){
            if (value === '') {
                callback(new Error(this.$t('form.nonRepPsw')));
            } else if (value !== this.newWallet.password){
                callback(new Error(this.$t('form.disMatch')));
            } else {
                callback();
            }
        },
        checkAccount(rule, value, callback){
            if(!value){
                callback(new Error( this.$t('wallet.walletNameRequired')))
            }else{
                callback();
            }
        },
        newOWallet(){
            this.$refs['newWallet'].validate((valid) => {
                if(valid){
                    createAccount(this.newWallet.account,this.newWallet.password,(resp)=>{
                        // console.log(resp)
                        if(resp.code == 200){
                            // 创建成功
                            this.$refs['newWallet'].resetFields();
                            this.walletInfo = resp
                            this.success = true

                            // 创建的新账户自动打100个测试币
                            testCoin(this.walletInfo.keystore.publicKey,(resp)=>{
                                console.log(resp)
                                if(resp.success){
                                    // 申请成功
                                    this.$message({
                                        message: this.$t('wallet.applySuccess'),
                                        type: 'success'
                                    })
                                }
                            })

                        }else{
                            // 创建失败
                            this.$message({
                                // message: this.$t('wallet.createWalletfail'),
                                message: resp.msg,
                                type: 'error'
                            })
                        }
                    }) 
                }
            })
        },
        goImport(){
            this.$refs['newWallet'].resetFields();
            this.$router.push('/o-wallet-import')
        },
        goBack(){
            this.$refs['newWallet'].resetFields();
            this.$router.push('/home')
        },
        getFile(){
            let file = document.getElementById('newFile').files[0];
            let name = file.name;
            let dirPath = file.path.replace(name,'') + name;
            var keystorename = this.walletInfo.path.split('/')[this.walletInfo.path.split('/').length-1]
            
            fs.writeFile(dirPath+'/'+keystorename,JSON.stringify(this.walletInfo.keystore),(res)=>{
                // console.log(res)
                if(res == null){
                    this.$message({
                        message: this.$t('wallet.downloadJsonSuccess'),
                        type: 'success'
                    })
                }else{
                    this.$message({
                        message: this.$t('wallet.downloadJsonFail'),
                        type: 'error'
                    })
                }
            })
            this.$refs.inputNewFile.value = null;
        }
    }
}
</script>

<style lang="less" scoped> 
.wallet-new{
    position:absolute;
    top:65px;
    bottom:22px;
    left:10px;
    right:10px;
    .wallet-content{
        height: 100%;
        .box{
            width:300px;
            padding: 50px 0;
            margin: 0 auto;
            .step{
                margin-left:35px;
            }
            .form{
                margin-top:30px;
                margin: 30px auto;
                .btn-box{
                    margin-top:20px;
                    .el-button{
                        width:80px;
                        height:32px;
                        padding:0;
                        font-size:12px;
                        &:first-child{
                            margin: 0 40px 0 0;
                        }
                    }
                }
                .password{
                    .warn{
                        margin:-2px 0 10px 2px;
                        font-size: 12px;
                        color: #F56C6C;
                        white-space: nowrap;
                        line-height: 18px;
                    }
                }
            }
            .tab-list {
                width:300px;
                padding-top:15px;
                display:inline-block;
                display: flex;
                justify-content: space-between;
            }
            &.box2{
                width:680px;
                .step{
                    margin:0 auto;
                }
                .success{
                    margin: 30px auto 10px;
                }
                .compolete{
                    margin-bottom: 20px;
                    color:#32C5DD;
                    font-size: 12px;
                    text-align:center;
                }
                .wallet-info{
                    padding:15px 20px 0px 20px;
                    font-size: 12px;
                    color: #1A1A1A;
                    border:1px solid rgba(217,217,217,1);
                    border-radius:4px;
                    p{
                        margin-bottom:15px;
                        color: #22272C;
                        .label{
                            display:inline-block;
                            width:115px;
                            color: #525768;
                        }
                        .value{
                            font-size: 13px;
                        }
                        .pub{
                            word-break: break-all;
                            text-indent: 58px;
                        }
                        .tip{
                            display:inline-block;
                            height:26px;
                            line-height:26px;
                            color: #F5A623;
                        }
                        .btn{
                            display:inline-block;
                            width:90px;
                            height:26px;
                            line-height:26px;
                            text-align: center;
                            color:#fff;
                            background:#32C5DD;
                            border-radius:4px;
                            margin-left:20px;
                            cursor: pointer;
                            position:relative;
                            input{
                                display:inline-block;
                                width:100%;
                                height:100%;
                                opacity:0;
                                position:absolute;
                                top:0;
                                left:0;
                            }
                        }
                    }
                    .public-box{
                        display:flex;
                        .pub{
                            padding: 0 0 0 2px;
                            text-indent:0;
                            flex: 1;
                        }
                    }
                }
                .back{
                    margin-top: 20px;
                    text-align:center;
                    .btn{
                        display:inline-block;
                        width:80px;
                        height:32px;
                        line-height:32px;
                        text-align:center;
                        color:#fff;
                        background:#32C5DD;
                        border-radius:4px;
                        cursor: pointer;
                    }
                }
            }
        }
    }
}
</style>